<script lang="ts">

  import {ref} from 'vue'

  export default{
   
    data(){
      return {
         dmsg:"select API"
      }
    },
    methods:{
      showInfo(){
        console.log("Vue2的写法")
        console.log(this.msg);
        
      }
    },
    setup() {

      //定义属性 默认不是响应式的数据
      const msg = 'hello vue setup'
      let counter = ref(1)
      

  

      //方法
      function numPlus(){
        // console.log(this)
       
        counter.value ++;

       
        
      }

     //计算属性、 wacth
        
      return {msg,counter,numPlus}
      //返回函数的时候 当渲染函数使用，
      // return ()=> '你好啊！'
    },    


  }



</script>

<template>
 
    自定义的 一个  vue组件 {{ msg }}  <br>
    

    <button @click="numPlus">计数器 {{ counter }}</button>


    <hr>
    <div>vue2的选项式写法</div>
   <div> vue2的选项式定义的数据 {{ dmsg }}</div>
    <button @click="showInfo">调用vue2选项式的 方法</button>

</template>

<style scoped>

</style>
